<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>夸克网盘文件管理器</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <!-- 头部导航 -->
        <header class="header">
            <div class="header-content">
                <h1><i class="fas fa-cloud"></i> 夸克网盘文件管理器</h1>
                <div class="header-actions">
                    <button id="batchRenameBtn" class="btn btn-warning">
                        <i class="fas fa-list"></i> 批量重命名
                    </button>
                    <button id="refreshBtn" class="btn btn-primary">
                        <i class="fas fa-sync-alt"></i> 刷新
                    </button>
                    <button id="settingsBtn" class="btn btn-secondary">
                        <i class="fas fa-cog"></i> 设置
                    </button>
                </div>
            </div>
        </header>

        <!-- 控制面板 -->
        <div class="control-panel">
            <div class="search-box">
                <i class="fas fa-search"></i>
                <input type="text" id="searchInput" placeholder="搜索文件或文件夹...">
            </div>
            
            <div class="filter-controls">
                <select id="folderSelect" class="filter-select">
                    <option value="0">根目录</option>
                </select>
                
                <select id="pageSizeSelect" class="filter-select">
                    <option value="10">10条/页</option>
                    <option value="20" selected>20条/页</option>
                    <option value="50">50条/页</option>
                    <option value="100">100条/页</option>
                </select>
                
                <select id="sortSelect" class="filter-select">
                    <option value="name">按名称排序</option>
                    <option value="size">按大小排序</option>
                    <option value="date">按日期排序</option>
                    <option value="type">按类型排序</option>
                </select>
            </div>
        </div>

        <!-- 面包屑导航 -->
        <div class="breadcrumb">
            <span class="breadcrumb-item active" data-fid="0">
                <i class="fas fa-home"></i> 根目录
            </span>
        </div>

        <!-- 文件列表区域 -->
        <div class="file-list-container">
            <div class="file-list-header">
                <div class="file-list-actions">
                    <button id="selectAllBtn" class="btn btn-sm btn-outline">
                        <i class="fas fa-check-square"></i> 全选
                    </button>
                    <button id="downloadSelectedBtn" class="btn btn-sm btn-primary" disabled>
                        <i class="fas fa-download"></i> 下载选中
                    </button>
                    <button id="deleteSelectedBtn" class="btn btn-sm btn-danger" disabled>
                        <i class="fas fa-trash"></i> 删除选中
                    </button>
                </div>
                
                <div class="view-toggle">
                    <button id="listViewBtn" class="view-btn active">
                        <i class="fas fa-list"></i>
                    </button>
                    <button id="gridViewBtn" class="view-btn">
                        <i class="fas fa-th"></i>
                    </button>
                </div>
            </div>

            <!-- 加载状态 -->
            <div id="loadingSpinner" class="loading-spinner">
                <i class="fas fa-spinner fa-spin"></i>
                <span>加载中...</span>
            </div>

            <!-- 文件列表 -->
            <div id="fileList" class="file-list list-view">
                <!-- 文件项将通过JavaScript动态生成 -->
            </div>

            <!-- 空状态 -->
            <div id="emptyState" class="empty-state" style="display: none;">
                <i class="fas fa-folder-open"></i>
                <h3>暂无文件</h3>
                <p>当前文件夹为空，请尝试其他文件夹或刷新页面</p>
            </div>
        </div>

        <!-- 分页控件 -->
        <div class="pagination-container">
            <div class="pagination-info">
                <span id="paginationInfo">显示 0-0 条，共 0 条</span>
            </div>
            
            <div class="pagination">
                <button id="prevPageBtn" class="pagination-btn" disabled>
                    <i class="fas fa-chevron-left"></i> 上一页
                </button>
                
                <div id="pageNumbers" class="page-numbers">
                    <!-- 页码按钮将通过JavaScript动态生成 -->
                </div>
                
                <button id="nextPageBtn" class="pagination-btn" disabled>
                    下一页 <i class="fas fa-chevron-right"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- 设置模态框 -->
    <div id="settingsModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-cog"></i> 设置</h3>
                <button class="modal-close">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="cookieInput">夸克网盘Cookie:</label>
                    <textarea id="cookieInput" rows="4" placeholder="请输入夸克网盘的Cookie信息..."></textarea>
                </div>
                <div class="form-group">
                    <label for="traceIdInput">追踪ID (eagleeyeTraceid):</label>
                    <input type="text" id="traceIdInput" placeholder="请输入追踪ID...">
                </div>
                <div class="form-group">
                    <label for="apiUrlInput">API地址:</label>
                    <input type="text" id="apiUrlInput" value="http://localhost:8080/api/quark" readonly>
                </div>
            </div>
            <div class="modal-footer">
                <button id="saveSettingsBtn" class="btn btn-primary">保存设置</button>
                <button id="cancelSettingsBtn" class="btn btn-secondary">取消</button>
            </div>
        </div>
    </div>

    <!-- 文件详情模态框 -->
    <div id="fileDetailModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-file"></i> 文件详情</h3>
                <button class="modal-close">&times;</button>
            </div>
            <div class="modal-body">
                <div id="fileDetailContent">
                    <!-- 文件详情内容将通过JavaScript动态生成 -->
                </div>
            </div>
            <div class="modal-footer">
                <button id="downloadFileBtn" class="btn btn-primary">
                    <i class="fas fa-download"></i> 下载文件
                </button>
                <button id="closeDetailBtn" class="btn btn-secondary">关闭</button>
            </div>
        </div>
    </div>

    <!-- 重命名模态框 -->
    <div id="renameModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-edit"></i> 重命名文件</h3>
                <button class="modal-close">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="currentFileName">当前文件名:</label>
                    <input type="text" id="currentFileName" readonly class="form-control">
                </div>
                <div class="form-group">
                    <label for="newFileName">新文件名:</label>
                    <input type="text" id="newFileName" class="form-control" placeholder="请输入新文件名...">
                </div>
                <div class="form-group">
                    <label for="fileExtension">文件扩展名:</label>
                    <input type="text" id="fileExtension" readonly class="form-control">
                </div>
            </div>
            <div class="modal-footer">
                <button id="confirmRenameBtn" class="btn btn-primary">
                    <i class="fas fa-check"></i> 确认重命名
                </button>
                <button id="cancelRenameBtn" class="btn btn-secondary">取消</button>
            </div>
        </div>
    </div>

    <!-- 批量重命名模态框 -->
    <div id="batchRenameModal" class="modal">
        <div class="modal-content" style="max-width: 800px;">
            <div class="modal-header">
                <h3><i class="fas fa-list"></i> 批量重命名</h3>
                <button class="modal-close">&times;</button>
            </div>
            <div class="modal-body">
                <div class="batch-rename-tabs">
                    <button class="tab-btn active" data-tab="export">1. 导出文件列表</button>
                    <button class="tab-btn" data-tab="import">2. 导入修改后的文件</button>
                </div>
                
                <!-- 导出标签页 -->
                <div id="exportTab" class="tab-content active">
                    <div class="form-group">
                        <label>导出所有文件名和文件夹名：</label>
                        <p class="help-text">点击下方按钮导出所有文件名，然后修改Excel文件中的文件名，最后导入修改后的文件。</p>
                        <button id="exportFilesBtn" class="btn btn-primary">
                            <i class="fas fa-file-excel"></i> 导出Excel文件
                        </button>
                    </div>
                    <div id="exportResult" class="export-result" style="display: none;">
                        <h4>导出完成！</h4>
                        <p>文件已导出，请下载并修改文件名，然后切换到"导入修改后的文件"标签页。</p>
                        <a id="downloadLink" class="btn btn-success" download="quark_files.xlsx">
                            <i class="fas fa-file-download"></i> 下载Excel文件
                        </a>
                    </div>
                </div>
                
                <!-- 导入标签页 -->
                <div id="importTab" class="tab-content">
                    <div class="form-group">
                        <label for="importFile">选择修改后的文件：</label>
                        <input type="file" id="importFile" accept=".csv,.xlsx,.xls" class="form-control">
                        <p class="help-text">请选择修改后的CSV或Excel文件，确保包含文件ID和新文件名。</p>
                    </div>
                    <div id="importPreview" class="import-preview" style="display: none;">
                        <h4>预览重命名操作：</h4>
                        <div class="preview-table">
                            <table>
                                <thead>
                                    <tr>
                                        <th>文件ID</th>
                                        <th>原文件名</th>
                                        <th>新文件名</th>
                                    </tr>
                                </thead>
                                <tbody id="previewTableBody">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="startBatchRenameBtn" class="btn btn-primary" style="display: none;">
                    <i class="fas fa-play"></i> 开始批量重命名
                </button>
                <button id="cancelBatchRenameBtn" class="btn btn-secondary">取消</button>
            </div>
        </div>
    </div>

    <!-- 消息提示 -->
    <div id="messageToast" class="toast">
        <div class="toast-content">
            <i class="toast-icon"></i>
            <span class="toast-message"></span>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>